<!-- 交租订单 -->
<template>
<div>
  <navbar title="确认订单"></navbar>
  <layout-main>
    <order-item
      v-bind:rentStartTime='orderInfo.contractStartDate'
      v-bind:rentEndTime='orderInfo.contractEndDate'
      v-bind:monthRent='orderInfo.monthRent'
      v-bind:rentDay='orderInfo.deliveryDate'
      v-bind:rentType='orderInfo.rentType'
    ></order-item>
    <div class="weui-panel w-100">
      <div class="weui-panel__bd">
        <div class="weui-media-box weui-media-box_small-appmsg">
          <form>
            <div class="weui-cells">
              <div
                v-on:click="pickBank"
                class="weui-cell weui-cell_access"
              >
                <div class="weui-cell__hd">
                  <label class="weui-label" for="bank">到账银行</label>
                </div>
                <div class="weui-cell__bd">
                    <input
                      v-model="submitData.payBank"
                      id="bank"
                      class="weui-input align-right"
                      type="text"
                      placeholder="请选择"
                      readonly
                      required
                      emptyTips="请选择到账银行"
                    >
                </div>
                <div class="weui-cell__ft"></div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <label class="weui-label">到账支行</label>
                </div>
                <div class="weui-cell__bd">
                  <input
                    v-model="submitData.payBankBranch"
                    id="branchBank"
                    class="weui-input align-right"
                    type="text"
                    placeholder="请输入"
                    required
                    emptyTips="请输入到账支行"
                  >
                </div>
              </div>

              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <label class="weui-label">到账卡号</label>
                </div>
                <div class="weui-cell__bd">
                  <input
                    v-model="submitData.bankCardCode"
                    id="cardNo"
                    class="weui-input align-right"
                    type="number"
                    placeholder="请输入"
                    required
                    pattern="[0-9]*"
                    emptyTips="请输入到账卡号"
                    notMatchTips="请输入正确的卡号"
                  >
                </div>
              </div>

              <div
                v-on:click="pickerMonth"
                class="weui-cell weui-cell_access">
                <div class="weui-cell__hd">
                  <label class="weui-label">交租月份</label>
                </div>
                <div class="weui-cell__bd">
                    <input
                      v-model="submitData.rentPayMonth"
                      id="payMonth"
                      class="weui-input align-right"
                      type="text"
                      placeholder="请选择"
                      readonly
                      required
                      emptyTips="请选择交租月份"
                    >
                </div>
                <div class="weui-cell__ft"></div>
              </div>

              <div class="weui-cell">
                <div class="weui-cell__bd">
                  <p class="money">合计: <strong>{{ submitData.rentAmount }}元</strong></p>
                </div>
              </div>
            </div>
          </form>
          <!-- <div class="weui-cells">
            <div class="weui-cell">
              <div class="weui-cell__bd">
                <p class="align-right rentStage-desc">办理房租分期，实际支付2900元/月</p>
              </div>
              <a class="weui-cell__ft rentStage-action" href="javascript:;">前去办理</a>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </layout-main>

  <footer>
    <p class="footer-desc">实付总价：<strong><span>￥</span>{{ submitData.rentAmount }}</strong></p>
    <a
      v-on:click="submitOrder"
      class="footer-btn"
      href="javascript:;">确认支付</a>
  </footer>
</div>
</template>

<script>
// UI组件
import OrderItem from '../components/OrderItem'
import layoutMain from '../layout'
import Navbar from '../components/Navbar'

import {mapActions} from 'vuex'
// JS依赖
import weui from 'weui.js'
import ajax from '../assets/ajax.js'

// 其他
import banks from '../assets/banks.json'
import months from '../assets/months.json'

export default {
  components: {
    OrderItem,
    layoutMain,
    Navbar
  },
  data() {
    return {
      loading: null,
      orderInfo: {
        contractStartDate: '',
        contractEndDate: '',
        monthRent: 0,
        deliveryDate: 1,
        // payMonths: ''
      },
      submitData: {
        phone: '',
        userId: '',
        rentType: '',
        userName: '',
        landlordName: '',
        rentCode: '',
        rentPayMonth: '',
        rentPayDay: '',
        payBank: '',
        payBankBranch: '',
        bankCardCode: '',
        rentStartDate: '',
        rentEndDate: '',
        rentAmount: 0
      }
    }
  },
  created(){
    this.getOrderInfo()
  },
  methods: {
    // 到账银行
    pickBank() {
      let self = this;
      weui.picker(banks,{
        className: 'picker-bank',
        defaultValue: [0],
        onConfirm: function(result) {
          let bankInfo = banks[result[0]];
          self.submitData.payBank = bankInfo.label;
        }
      })
    },
    // 交租月份
    pickerMonth() {
      let self = this;
      weui.picker(months, {
        className: 'picker-month',
        defaultValue: [new Date().getMonth() + 1], // 当前月
        onConfirm: function(result) {
          let monthInfo = months[result[0]]
          self.submitData.rentPayMonth = monthInfo.label;
        }
      })
    },
    // 表单验证
    validate() {
      const bank = document.querySelector('#bank').value
      const branchBank = document.querySelector('#branchBank').value
      const cardNo = document.querySelector('#cardNo').value
      const payMonth = document.querySelector('#payMonth').value
      if (!bank) {
        weui.topTips('请选择到账银行')
        return false
      } else if (!branchBank) {
        weui.topTips('请输入到账支行')
        return false
      } else if (!cardNo) {
        weui.topTips('请输入到账卡号')
        return false
      } else if (!/[0-9]*/.test(cardNo)) {
        weui.topTips('请输入正确的到账卡号')
        return false
      } else if (!payMonth) {
        weui.topTips('请选择交租月份')
        return false
      }
      return true
    },
    getOrderInfo(){
      this.$store.dispatch({
        type: 'GET_ORDER_INFO',
        mobile: this.$store.state.user.mobile
      }).then(() => {
        const {
          contractStartDate,
          contractEndDate,
          monthRent,
          deliveryDate,
          leaseStatus,

          memberName,
          landlordName,
          leaseNo
        } = this.$store.state.order.data

        this.orderInfo.contractStartDate = contractStartDate;
        this.orderInfo.contractEndDate = contractEndDate;
        this.orderInfo.monthRent = monthRent;
        this.orderInfo.deliveryDate = deliveryDate;

        // 提交订单的信息, 字段名不统一...
        this.submitData.phone = this.$store.state.user.mobile
        this.submitData.userId = this.$store.state.user.userId
        this.submitData.userName = memberName
        this.submitData.rentType = '月付' // 暂时写死
        this.submitData.landlordName = landlordName
        this.submitData.rentCode = leaseNo
        this.submitData.rentPayDay = deliveryDate
        this.submitData.rentStartDate = contractStartDate
        this.submitData.rentEndDate = contractEndDate
        this.submitData.rentAmount = monthRent
      })
    },
    // 确认支付
    submitOrder() {
      if (!this.validate()) return
      this.loading = weui.loading('加载中...')
      const data = ajax.handleData({
        methodId: '1020',
        data: this.submitData
      })
      this.$http.post(ajax.url, data).then((response) => {
        const code = response.body.code
        this.loading.hide()
        if (code === '0') {
          const data = response.body.res.data
          this.$store.commit('SET_SUBMITTED_DATA', data)
          this.$router.push('payOrder')
        } else {
          // weui.topTips('网络错误，请稍后重试')
          const msg = response.body.res.msg
          weui.topTips('the code is' + code  + ', the msg is' + msg)
        }
      }, (error) => {
        // weui.topTips('网络错误，请稍后重试')
        weui.topTips('error')
      })
    },
  }
}
</script>

<style lang="less" scoped>
  .main {
    padding: 10px;
  }

  .weui-panel.w-100 {
    margin: 15px -10px 0;
  }

  .align-right {
    text-align: right;
  }

  .weui-cell__bd {
    font-size: 14px;
    line-height: 14px;
  }

  .weui-cell__ft {
    font-size: 14px;
    color: #808080;
  }

  .money {
    font-size: 18px;
    text-align: right;
    strong {
      color: #ff4d07;
      font-weight: normal;
    }
  }

  // :invalid {
  //   color: red
  // }

  // .rentStage-desc {
  //   font-size: 12px;
  //   color: #808080;
  //   margin-right: 5px;
  // }

  // .rentStage-action {
  //   font-size: 12px;
  //   color: #ff624c;
  //   &:active {
  //     opacity: .5;
  //   }
  // }

  footer {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    line-height: 42px;
    background: #fff;
    box-shadow: 0 -1px 1px 0 rgba(213,213,213,.3);
    z-index: 1024;
  }

  .footer-desc {
    flex: 1;
    display: inline-flex;
    align-items: center;
    padding-left: 10px;
    font-size: 14px;
    opacity: .87;
    strong {
      font-size: 20px;
      color: #ff5919;
      font-weight: normal;
      span {
        font-size: 12px;
      }
    }
  }

  .footer-btn {
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    color: #fff;
    background-color: #ff624c;
    &:active {
      opacity: .5;
    }
  }
</style>
